<script setup lang="ts">
import { ref } from "vue";

const tabs = ref([
  {
    name: "CAD",
  },
  {
    name: "UG",
  },
  {
    name: "3Done",
  },
]);
const activeIndex = ref(0); // 默认激活第一个Tab

const functionClick = (index) => {
  activeIndex.value = index;
};
</script>

<template>
  <div>
    <div
      style="margin-top: 47px; display: flex; justify-content: space-between"
    >
      <div style="font-size: 22px; font-weight: bold">创意设计</div>
      <div style="line-height: 30px">
        <span>查看更多</span>
        <i class="iconfont icon-you"></i>
      </div>
    </div>
    <div style="display: flex">
      <div
        class="function"
        v-for="(tab, index) in tabs"
        :key="index"
        :class="{ 'active-tab': activeIndex === index }"
        @click="functionClick(index)"
      >
        {{ tab.name }}
      </div>
    </div>
    <div style="display: flex; justify-content: space-between">
      <div class="live_box" v-for="(item, index) in 5" :key="index">
        <div class="live_img"></div>
        <div style="padding: 10px 8px">
          <div style="font-weight: bold; font-size: 16px">
            创意设计·课程主题课程...
          </div>
          <div style="color: #666666; font-size: 12px; margin-top: 10px">
            <div>1月14日 09:00-10:00</div>
            <div>讲课老师：月亮</div>
          </div>
          <div
            style="
              display: flex;
              justify-content: space-between;
              margin-top: 10px;
            "
          >
            <div style="font-size: 16px; color: #5ad157">免费</div>
            <div style="color: #666666; font-size: 12px; line-height: 22px">
              参与人数:100人
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.icon-shijian {
  color: #fff;
}
.live_img {
  width: 100%;
  height: 140px;
  background-size: contain;
  background: url("@/assets/images/CloudClassroom/cad_one.png") no-repeat
    center/cover;
}
.live_box {
  width: 19%;
  background-color: #fff;
  border-radius: 8px 8px 8px 8px;
}
.function {
  margin: 13px 0 22px;
  //   width: 88px;
  padding: 0 13px;
  height: 36px;
  margin-right: 20px;
  line-height: 36px;
  cursor: pointer;
  text-align: center;
  border: 1px solid #dddddd;
  border-radius: 18px 18px 18px 18px;
  box-shadow: 0px 1px 4px 0px rgba(102, 102, 102, 0.25);
}
.active-tab {
  background: linear-gradient(to bottom, #a7dffb, #1ca9eb);
}
</style>
